<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM2级事件绑定</title>
  <script>
    window.onload = function() {
      // 1.获取绑定事件的dom节点
      var dom = document.getElementsByTagName('div')[0]
      // 2.给目标元素绑定DOM0事件
      dom.onclick = function() {
        console.log(1);
      }
      // dom.onclick = function() {
      //   console.log(1);
      //   console.log(2);
      // }
      // 3.DOM2级的事件绑定
      // 优点：在不影响之前绑定事件的基础上，继续绑定其他事件
      // 缺点：IE8级以下浏览器不支持
      var myfun = function() {
        console.log(2);
      }
      var myfun1 = function() {
        console.log(3);
      }
      dom.addEventListener('click',myfun)
      dom.addEventListener('click',function() {
        console.log(4);
      })
      dom.addEventListener('click',myfun1)
      // 4.解绑事件
      // DOM2级事件解绑只能解绑具名函数，匿名函数无法解绑
      dom.removeEventListener('click',myfun)
    }
  </script>
</head>
<body>
  <div class="box">
    点击
  </div>
</body>
</html>